<template>
    <div class="container">
        <el-card>
            <el-tabs style="height: 40vw;" tab-position="left" v-model="editableTabsValue" type="border-card" closable
                @tab-remove="removeTab">
                <el-tab-pane v-for="(item) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                    <el-card class="chat">
                        <div class="chatList" style="overflow: scroll;overflow-x: hidden;">
                            <div v-for="item in 10" :key="item">
                                <div class="left" style="align-items: center;justify-content:flex-start;display: flex;">
                                    <el-avatar size="medium"
                                        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
                                    </el-avatar>
                                    <span style="margin-left: 10px;">111111111</span>
                                </div>
                                <div class="right" style="align-items: center;justify-content: flex-end;display: flex;">
                                    <span style="margin-right: 10px;">111111111111111</span>
                                    <el-avatar size="medium"
                                        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
                                    </el-avatar>
                                </div>
                            </div>
                        </div>
                        <div class="ipt">
                            <el-row class="ipt-row">
                                <el-col style="color: aquamarine;" :span="22">
                                    <el-input style="height: 100%;" v-model="input" placeholder="请输入内容"></el-input>
                                </el-col>
                                <el-col style="color: blueviolet;" :span="2">
                                    <el-button style="width: 90%;height: 100%;margin-left: 10px;"
                                        type="primary">发送</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input: '',
            editableTabs: [{
                title: 'Tab 1',
                name: '1',
                content: 'Tab 1 content'
            }, {
                title: 'Tab 2',
                name: '2',
                content: 'Tab 2 content'
            }],
            editableTabsValue: '1'
        }
    },
    created() { },
    methods: {
        removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }

            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
    }
}
</script>

<style lang="scss">
.el-tabs__nav-scroll {
    width: 200px;
}

.el-tabs__item.is-left.is-closable {
    text-align: center;
    height: 50px;
    line-height: 50px;
}

.chat {
    height: 38vw;
    width: 100%;
    // background-color: aquamarine;

    .el-card__body {
        height: 100%;
        width: 100%;

        .chatList {
            height: 90%;
            width: 100%;

            // background-color: antiquewhite;
            .left {
                width: 100%;
                height: 40px;
                // background-color: aqua;
            }

            .right {
                width: 100%;
                height: 40px;
                // background-color: red;
            }
        }

        .ipt {
            height: 10%;
            width: 100%;
            // background-color: blue;

            .ipt-row {
                height: 100%;

                .el-col {
                    height: 100%;

                    .el-input__inner {
                        height: 100%;

                    }

                }
            }
        }
    }

}
</style>